<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>小学学区划分</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../plugins/mui/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../../css/excutive_housekeeper/school.css" />
    <script src="../../js/statistics.js"></script>
	<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
</head>

<body>
	<header class="mui-bar mui-bar-nav header">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title" id='title'>中学学区划分</h1>
	</header>
	<div id="container">
	</div>
	<div id="box"></div>
	<div class="search-box clear">
		<div class="input-box">
			<span></span>
			<input id="place" type="text"/ placeholder="请输入地址">
		</div>
		<span class="search-button" id="button">搜索</span>
	</div>
	<script src="../../plugins/jquery/jquery-3.1.0.min.js" type="text/javascript" ></script>
	<script src="../../plugins/mui/mui.min.js"></script>
	<script type="text/javascript">
	    mui.init();
	    mui.plusReady(function() {
	        
	    });
	    $(function(){
	    	var center = new qq.maps.LatLng(31.4158393143,119.4845959033);
		    var map = new qq.maps.Map(document.getElementById('container'),{
		        center: center,
		        zoom: 14
		    });
		    //搜索
		    var searchService = new qq.maps.SearchService({
		        map : map
		    });
		    var button = document.getElementById('button');
		    button.addEventListener('tap',function(){
		    	var address = document.getElementById('place').value,
		    		localtion = '河东市';
	    		searchService.setLocation(localtion);
    			searchService.search(address);
		    },false);
		    //软键盘收回
		    document.getElementById('container').addEventListener('touchstart',function(){
		    	document.getElementById('place').blur();
		    },false);
		    //学区划分
		    var path = [
		    	[
		    		new qq.maps.LatLng(31.4359500621,119.4789147377),
        			new qq.maps.LatLng(31.4422844835,119.4565987587)
		    	],
		    	[
		    		new qq.maps.LatLng(31.4469663709,119.4799178839),
			        new qq.maps.LatLng(31.4439778618,119.4797408581),
			        new qq.maps.LatLng(31.4392775175,119.4819402695),
			        new qq.maps.LatLng(31.4379410572,119.4796603918),
			        new qq.maps.LatLng(31.4359500621,119.4789147377),
			        new qq.maps.LatLng(31.4166146147,119.4738936424),
			        new qq.maps.LatLng(31.4052971343,119.4709163904),
			        new qq.maps.LatLng(31.4046424001,119.4782388210),
			        new qq.maps.LatLng(31.3992166298,119.4768387079),
			        new qq.maps.LatLng(31.3900768172,119.4784212112),
			        new qq.maps.LatLng(31.3878604160,119.5086282492)
		    	],
		    	[
		    		new qq.maps.LatLng(31.4166146147,119.4738936424),
			        new qq.maps.LatLng(31.4161934384,119.4770962000),
			        new qq.maps.LatLng(31.4257014899,119.4812804461),
			        new qq.maps.LatLng(31.4242595508,119.4840162992),
			        new qq.maps.LatLng(31.4224834176,119.4886296988),
			        new qq.maps.LatLng(31.4177865735,119.4890803099),
			        new qq.maps.LatLng(31.4169259177,119.4887423515),
			        new qq.maps.LatLng(31.4160789880,119.4955551624),
			        new qq.maps.LatLng(31.4172646874,119.4956731796),
			        new qq.maps.LatLng(31.4206202727,119.4970142841),
			        new qq.maps.LatLng(31.4187342013,119.5012950897),
			        new qq.maps.LatLng(31.4102418325,119.5112514496),
			        new qq.maps.LatLng(31.4091018280,119.5149850845)
		    	],
		    	[
		    		new qq.maps.LatLng(31.4242595508,119.4840162992),
			        new qq.maps.LatLng(31.4276331957,119.4876211882),
			        new qq.maps.LatLng(31.4286722722,119.4922184944),
			        new qq.maps.LatLng(31.4292078269,119.4969606400),
			        new qq.maps.LatLng(31.4315331061,119.5139229298)
		    	],
		    	[
		    		new qq.maps.LatLng(31.4286722722,119.4922184944),
			        new qq.maps.LatLng(31.4312493152,119.4886350632),
			        new qq.maps.LatLng(31.4324394000,119.4896221161),
			        new qq.maps.LatLng(31.4352635023,119.4892144203),
			        new qq.maps.LatLng(31.4346822111,119.4918429852),
			        new qq.maps.LatLng(31.4468611111,119.4919288158)
		    	]
		    ];
		    var points = [
		    	new qq.maps.LatLng(31.4227700000,119.4700900000),
		    	new qq.maps.LatLng(31.4314400000,119.4846400000),
		    	new qq.maps.LatLng(31.4342000000,119.4927600000),
		    	new qq.maps.LatLng(31.4223500000,119.4900200000),
		    	new qq.maps.LatLng(31.4115600000,119.4834600000)
		    	
		    ];
		    var labels = [];
		    var schools = [
		    	"第六中学","第二中学","光华初中","实验初中","燕山中学"
		    ];
		    var titles = [
		    	"河东市第六中学","河东市第二中学","河东市光华初中","河东市实验初中","河东市燕山中学"
		    ];
		    var contents = [
		    	"东面：清溪路（濑江桥）－清溪中路－清溪南路以西；北面：清溪路（濑江桥）－南河以南（含原清安乡地块生源）。","东面：人民路（东风桥）－竹墅桥－和平北路（和平桥）－花园路－图塘路－银梧路以西；南面：南环西路－天目路－平陵中路－西大街－人民路（东风桥）以北；西面：清溪中路－清溪路－凤凰路（凤凰东桥）－丹金溧漕河以东（含胥渚、宋庄社区的失地农民生）。","南面：东大街－东升路以北；西面：人民路（东风桥）－和平北路（和平桥）－花园路－图塘路－银梧路以东（含昆仑花园四区18—25幢，昆仑南路136－298双号、187－445单号；前棠社区、棠下社区、徐格笪村委、毛场村委、昆仑村委、夏庄村委失地农民生）。","北面：西大街－东大街－东升路以南；南面：平陵中路（1-309单号、2-232双号）－钱家路（1-21单号、2-46双号）－燕园路－昆仑南路－平陵东路以北（含昆仑南路1－185单号，2－134双号）。","南面：燕城大道以北；西面：清溪南路－永平大道（G104）－燕山南路以东；北面：南环路－天目路－平陵中路－钱家路－燕园路－昆仑南路－平陵东路以南（含原城南乡地块生源）。"
		    ];
		    for(i=0;i<path.length;i++){
		    	var polyline = new qq.maps.Polyline({
			        path: path[i],
			        strokeColor: '#eb646a',
			        strokeWeight: 2,
			        editable:false,
			        map: map
			    });
		    }
		    for(i=0;i<points.length;i++){
		    	var marker = new qq.maps.Marker({
		    		position: points[i],
		    		map: map
		    	}),
		    	cssA = {
		    		color: "#333",
		    		fontSize: "12px",
		    		border: "1px solid #43ac45",
		    		padding: "0 2px",
		    		borderRadius: "4px"
		    	};
		    	offsetA= new qq.maps.Size(15, -23);
		    	labels[i] = new qq.maps.Label({
		    		position :points[i],
		    		map: map,
		    		content: schools[i],
		    		style: cssA,
		    		offset: offsetA
		    	}),
		    	markerIcon = new qq.maps.MarkerImage('../../images/icon/school.png');
		    	marker.setIcon(markerIcon);
		    	(function(n){
		    		qq.maps.event.addListener(labels[n],'click',function(){
			    		var html = '<div id="alert-box">' +
										'<div>' +
											'<img src="../../images/schools/middle-' + n + '.jpg">'+
											'<div class="content">学区学校：' + titles[n] +  '<br>学区范围：' + contents[n] + '</div>' +
											'<img class="close-icon" src="../../images/icon/close.png">' +
										'</div>'+
									'</div>';
						document.getElementById("box").innerHTML = html;
						var cssB = {
							color: "#fff",
				    		fontSize: "12px",
				    		background: "#43ac45",
				    		padding: "0 2px",
				    		borderRadius: "4px",
				    		border: "0"
						};
						for(var j=0;j<points.length;j++){
							if(j != n){
								labels[j].setStyle(cssA);
							}
						}
						labels[n].setStyle(cssB);
			    	});
		    	})(i);
		    	
		    }
		    $("#box").delegate('.close-icon','tap',function(){
		    	$("#box").empty();
		    })
		    
	    });	
	</script>
</body>

</html>